<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Object Model 文档对象模型</title>
</head>
<body>
<!--<p class="ha">213&lt;!&ndash;hahahha&ndash;&gt;</p>-->

<!--<div>-->
<!--    <p>a1</p>-->
<!--    <p>a2</p>-->
<!--</div>-->


<!--<div id="box">-->
<!--    <p id="pp">样式</p>-->
<!--</div>-->
<input type="text" id="te">
<script>
    // var person={
    //     name:"张三",
    //     hh:function () {
    //         alert("哈哈哈哈");
    //     }
    // }
    // console.log(person.hh());
    // var h=document.getElementsByClassName("ha")[0];
    // console.log(h);
    // console.log(h._proto_);
    // 元素节点(1)
    //  var p1 = document.getElementsByClassName("ha")[0];
    //  console.log(p1.nodeName,"|"+p1.nodeValue,"|"+p1.nodeType);
    //
    //  //获取属性节点(2) 元素节点(1)获取文本节点(3)获取注释节点(8)
    //  var attrNode=p1.attributes[0];
    //  console.log(attrNode.nodeName,"|"+attrNode.nodeValue,"|"+attrNode.nodeType);
    //
    //  //获取文本节点(3)
    //  var textNode=p1.childNodes[0];
    //  console.log(textNode.nodeName,"|"+textNode.nodeValue,"|"+textNode.nodeType);
    //
    //  //获取注释节点(8)
    //  var comNode=p1.childNodes[1];
    //  console.log(comNode.nodeName,"|"+comNode.nodeValue,"|"+comNode.nodeType);

    // console.log(document.nodeType);
    // var divNode=document.getElementsByTagName("div")[0];
    // console.log(divNode.childNodes);
    // console.log(divNode.firstChild);
    // console.log(divNode.lastChild);
    // console.log(divNode.parentNode);//获取父级元素

    //创建节点
//     var box=document.getElementById("box");
//     var p1=document.createElement("p");
//
//     var txt=document.createTextNode("niubu");
//     p1.appendChild(txt)
//
//     // p1.innerHTML="hahah";
//     box.appendChild(p1);
//     var p2=document.createElement("span");
//     var stxt=document.createTextNode("span标签");
//     p2.appendChild(stxt);
// //新查入节点，第二参考节点
//     box.insertBefore(p2,p1);
//     //替换  新查入节点，第二参考节点
//     var p111=document.createElement("span");
//     p111.innerHTML="替换了";
//     box.replaceChild(p111,document.getElementById("pp"));
//
//     box.removeChild(document.getElementById("pp"))

   var t=document.getElementById("te");
   t.onchange=function () {
        alert(1)
   }
   t.oninput=function () {
    console.log(t.nodeValue);
   }

</script>
</body>
</html>